<template>
	<view class="wanl-calendar">
		<view class="calendar flex justify-between align-center">
			<!-- <view class="title flex flex-direction align-center"> 
				<text>{{title}}</text>
			</view> -->
			<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="scroll-view flex justify-start align-center">
				<view :class="{cur:current == item.day}" class="item flex flex-direction align-center justify-center" v-for="(item,index) in dateList" :key="index" @tap="chooseDay(item,index)">
					<text>{{item.week}}</text>
					<text>{{item.time}}</text>
				</view>
			</scroll-view>
			<view class="flex justify-start align-center right" @tap="show = true">
				<text class="margin-right-xs text-df">展开日历</text>
				<text class="iconfont icon-arrow-double-right text-s"></text>
			</view>
		</view>
		
		<!-- <u-popup v-model="show" mode="top" :mask-custom-style="{top:top,transition:'inherit'}" :custom-style="{top:top}">
			<view style="width: 100%;height: 452rpx;">
				人生若只如初见，何事秋风悲画扇
			</view>
		</u-popup> -->
		<calendar :minDate="minDate" :top="top" v-model="show" :mode="mode" @change="change" color="#666666"></calendar>
	</view>
</template>

<script>
	import calendar from '@/components/wanl-calendar/calendar';
	export default {
		name: "wanl-calendar",
		props: {
			title: {
				type: String,
				default: '全部号源'
			},
			mode: {
				type: String,
				default: 'date'
			},
			top: {
				type: String,
				default: '45px'
			}
		},
		components:{
			calendar
		},
		data() {
			return {
				scrollLeft: '0',
				dateList: [],
				show: false,
				current: 0,
				minDate: ''
			};
		},
		created() {
			this.minDate = this.$moment().format('YYYY-MM-DD')
			let date = new Date();
			let year = date.getFullYear(); //获取当前年份
			let month = date.getMonth() + 1; //获取当前月份
			let day = date.getDate(); //获取当前月份
			let dd = new Date(year, month, 0); //获取当月总天数
			let current_month = [];
			let weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
			let toDay = (new Date().getMonth() + 1) + '.' + new Date().getDate();
			this.scrollLeft = (day - 1) * uni.upx2px(84);
			this.current = day;
			for (let i = 1; i <= dd.getDate(); i++) {
				let time = (new Date(date.setDate(i)).getMonth() + 1) + '.' + new Date(date.setDate(i)).getDate();
				// if(day <= i) {
					current_month.push({
						// time: i + "号" + new Date(date.setDate(i)),
						date:`${year}-${month > 9 ? month : '0' + month}-${i > 9 ? i : '0' + i}`,
						day: i,
						time: time,
						week: time == toDay ? '今天' : weekList[new Date(date.setDate(i)).getDay()], //获取对应日期的星期
					});
				// }
			}
			this.dateList = current_month
		},
		methods: {
			change(e){
				this.init(e.year,e.month,e.day,e.days);
				this.current = e.day;
				this.$emit('getDay',e.result)
			},
			chooseDay(item,index) {
				this.current = item.day;
				this.scrollLeft = index * uni.upx2px(84)
				this.$emit('getDay',item.date)
			},
			init(year,month,day,dd) {
				let date = new Date();
				let cyear = date.getFullYear(); //获取当前年份
				let cmonth = date.getMonth() + 1; //获取当前月份
				let cday = date.getDate(); //获取当前天
				
				let current_month = [];
				let weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let toDay = (new Date().getMonth() + 1) + '.' + new Date().getDate();
				this.current = day;
				for (let i = 1; i <= dd; i++) {
					let time = month + '.' + new Date(date.setDate(i)).getDate();
					current_month.push({
						// time: i + "号" + new Date(date.setDate(i)),
						date:`${year}-${month > 9 ? month : '0' + month}-${i > 9 ? i : '0' + i}`,
						day: i,
						time: time,
						week: time == toDay ? '今天' : weekList[new Date(`${year}-${month > 9 ? month : '0' + month}-${i > 9 ? i : '0' + i}`).getDay()], //获取对应日期的星期
					});
				}
				this.scrollLeft = (day - 1) * uni.upx2px(84)
				this.dateList = current_month
			}
		}
	}
</script>

<style lang="less">
	.wanl-calendar {
		background-color: #fff;
		// padding: 22rpx 0;
		.calendar {
			margin: 0 30rpx;
			overflow: hidden;
			.title {
				width: 80rpx;
				height: 80rpx;
				background: #4CBD66;
				border-radius: 6rpx;
				color: #fff;
				font-size: 22rpx;
				text-align: center;
				flex-wrap: wrap;
				padding: 10rpx;
				text {
					display: inline-block;
					line-height: 30rpx;
				}
			}
			.scroll-view {
				white-space: nowrap;
				// width: calc(100% - 160rpx - 90rpx);
				width: calc(100% - 160rpx);
				.item {
					display: inline-flex;
					// margin: 0 25rpx;
					width: 84rpx;
					height: 80rpx;
					&.cur {
						background: #4CBD66;
						border-radius: 6rpx;
						color: #fff !important;
						text {
							color: #fff !important;
						}
					}
					text {
						font-family: PingFang SC-Medium, PingFang SC;
						&:nth-child(1) {
							color: #444444;
							font-size: 24rpx;
							font-weight: 500;
						}
						&:nth-child(2) {
							font-size: 24rpx;
							font-weight: 500;
							color: #888888;
							line-height: 28rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
			.right {
				width: 160rpx;
				height: 118rpx;
				box-shadow: -20px 0px 30px 0px rgba(184,212,236,0.35);
				padding-left: 10rpx;
				text {
					&:last-child {
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>